<template>
  <ul class="nav flex justify-around">
    <li v-for="item in navList" :key="item.id">
      <router-link :to="item.to" class="flex flex-col justify-center items-center" active-class="active">
        <img :src="$route.path.includes(item.to) ? item.selected : item.normal" alt="">{{ item.name }}
      </router-link>
    </li>
      <!--  <div class="tab-item" @click="switchTo('/chat')">
          <img :src="'/chat' === $route.path ? tabBarImgArr[3].selected : tabBarImgArr[3].normal" alt="聊天">
          <span :class="{on: '/chat' === $route.path}">聊天</span>
      </div> -->
  </ul>
</template>

<script>

export default {
  data () {
    return {
      navList: [
        {
          id: 1,
          name: '电影',
          to: '/films',
          normal: require('@/assets/images/emm.png'),
          selected: require('@/assets/images/emm_selected.png')
        },
        {
          id: 2,
          name: '影院',
          to: '/cinemas',
          normal: require('@/assets/images/kouzhao.png'),
          selected: require('@/assets/images/kouzhao_selected.png')
        },
        {
          id: 3,
          name: '资讯',
          to: '/news',
          normal: require('@/assets/images/wu.png'),
          selected: require('@/assets/images/wu_selected.png')
        },
        {
          id: 4,
          name: '我的',
          to: '/center',
          normal: require('@/assets/images/wuyu.png'),
          selected: require('@/assets/images/wuyu_selected.png')
        }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~@/assets/styles/variables.scss";
.nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: .5rem;
  border-top: 1px solid #eee;
  background-color: #fff;
  line-height: 1.4em;
  font-size: .12rem;
  color: $baseColor;
  z-index: 10;
  li {
    width: 25%;
    text-align: center;
    a {
      width: 100%;
      height: 100%;
    }
  }
  img {
    width: .25rem;
    height: .25rem;
  }
}
.active {
  color:$lightColor;
}
</style>
